<template>
  <div>
    <!-- body -->
    <div v-for="(item, index) in hotList" :key="index" class="detail">
      <div class="detail-head">
        <!-- 轮播 -->
        <div class="head-img">
              <img :src="item.dish_images" />
        </div>
        <!-- 标题 -->
        <div class="head-title">
          <p>{{ item.dish_name }}</p>
        </div>
        <!-- 价格 -->
        <div class="head-price">
          <label>￥</label>
          <label class="price-t">{{ item.dish_nprice }}</label>
          <label class="price-b" v-if="item.dish_gprice.length > 0">￥{{ item.dish_gprice }}</label>
        </div>
        <div class="line">
          <p>我们承诺：永远只把食物最好的一面留给顾客！</p>
        </div>
      </div>
      <div class="detail-content">
        <p class="content-p">商品详情</p>
        <div>{{ item.dish_content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post, showModel } from "../../util";
export default {
    data() {
        return {
          hotList: [],
          indicatorDots: true,
          autoplay: true,
          interval: 4000,
          duration: 1000,
          indicatorActiveColor: "#EECBAD",
          circular: true,
          baseUrl: 'http://localhost/ccx_api/public/api/v1',
        }
    },
    methods: {
      getFreshDish() {
            try {
                var that = this
                wx.request({
                    url: that.baseUrl + '/getDishList/1',
                    method: 'GET',
                    success: function (res) {
                        that.hotList = res.data.dish
                    },
                    fail: function() {
                        //
                    },
                    complete: function() {
                        //
                    }
                })
                
            } catch (e) {
                showModel('请求失败', '请检查网络后再试!')
            }
        },
    },
    onLoad(options) {
      console.log(options);
      
    },
}
</script>

<style scoped>
  .detail {
    background: rgb(241, 236, 236);
    width: 100%;
    padding-bottom: 20px;
  }
  .detail-head {
    width: 100%;
    height: 430px;
    background: rgb(252, 253, 252);
  }
  .head-img {
    width: 100%;
    height: 290px;
  }
  .head-img .img {
    width: 100%;
    height: 100%;
  }
  .head-title {
    margin: 5px 10px 10px 10px;
  }
  .head-title p {
    letter-spacing: 2px;
    font-size: 20px;
    font-weight: 500;
  }
  .head-price {
    margin: 5px 10px 20px 10px;
  }
  .head-price label {
      font-size: 16px;
      color: rgb(241, 24, 24);
  }
  .head-price .price-t {
    font-size: 20px;
    margin-right: 5px;
  }
  .head-price .price-b {
    font-size: 14px;
    color: rgb(131, 127, 127);
    text-decoration: line-through;
  }
  .line {
    width: 94%;
    margin: 15px 3% 0 3%;
    height: 20px;
    border-top: 1px solid rgb(190, 185, 185);
    padding-top: 15px;
    font-size: 16px;
    color: rgb(150, 141, 141);
  }


  .detail-content {
    background: rgb(255, 255, 255);
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
    width: 100%;
  }
  .content-p {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 20px;
  }
</style>
